<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-container>
          <el-header>
            <div>
              <img :src="IMGURL + brand.imgKey" alt="" class="img-header" v-if="brand.imgKey">
            </div>
            {{brand.contacter}}
            <span style="float:right;cursor: pointer;" @click="dialogVisible = true">账户信息</span>
          </el-header>
          <el-main class="main-content">
            <h1>可提现余额</h1>
            <h2>￥{{brand.balance}}</h2>
            <div><el-button size="mini" @click="dialogVisible1 = true">提现</el-button></div>
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="16">
        <el-container>
          <el-header>
            最近余额流水动态
            <router-link :to="{name: 'account'}">
              <span style="float:right;cursor: pointer;">账户信息</span>
            </router-link>
          </el-header>
          <el-main class="main-content">
            <ul>
              <li v-for="item,index in balance" :key="index">
                <div>{{item.saveTime}}</div>
                <div>{{item.remark}}</div>
                <div>
                  <span v-if="item.status === 1">-</span>
                  <span v-if="item.status === 2">+</span>
                  {{item.amount}}元   (余额{{item.balance}}元)
                </div>
              </li>
            </ul>
          </el-main>
        </el-container>
      </el-col>
    </el-row>

    <el-container>
      <el-header>
        账户信息
        <router-link :to="{name: 'bill'}">
          <span style="float:right;cursor: pointer;">账户信息</span>
        </router-link>
      </el-header>
      <el-main class="main-table">
        <el-tabs v-model="activeName">
          <el-tab-pane label="待结算账单" name="first" style="color: #ffa200">
            <el-table
              element-loading-text="Loading"
              highlight-current-row
              row-class-name="ele-table-row"
              :data="bill1"
              style="width: 100%">
              <el-table-column label="日期" min-width="100">
                <template slot-scope="scope">
                  {{scope.row.saveTime}}
                </template>
              </el-table-column>
              <el-table-column label="账单金额" min-width="100">
                <template slot-scope="scope">
                  {{scope.row.amount}}
                </template>
              </el-table-column>
              <!--<el-table-column label="操作" min-width="100" show-overflow-tooltip>-->
                <!--<template slot-scope="scope">-->
                  <!--<el-button size="mini">查看</el-button>-->
                <!--</template>-->
              <!--</el-table-column>-->
              <!--<el-table-column label="账单信息" min-width="100" show-overflow-tooltip>-->
                <!--<template slot-scope="scope">-->
                  <!--&lt;!&ndash;{{scope.row.}}&ndash;&gt;-->
                <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </el-tab-pane>
        </el-tabs>

        <el-tabs v-model="activeName">
          <el-tab-pane label="已结算账单" name="first">
            <el-table
              element-loading-text="Loading"
              highlight-current-row
              row-class-name="ele-table-row"
              :data="bill2"
              style="width: 100%">
              <el-table-column label="日期" min-width="100">
                <template slot-scope="scope">
                  {{scope.row.saveTime}}
                </template>
              </el-table-column>
              <el-table-column label="账单金额" min-width="100">
                <template slot-scope="scope">
                  {{scope.row.amount}}
                </template>
              </el-table-column>
              <!--<el-table-column label="操作" min-width="100" show-overflow-tooltip>-->
                <!--<template slot-scope="scope">-->
                  <!--&lt;!&ndash;{{scope.row.}}&ndash;&gt;-->
                <!--</template>-->
              <!--</el-table-column>-->
              <!--<el-table-column label="账单信息" min-width="100" show-overflow-tooltip>-->
                <!--<template slot-scope="scope">-->
                  <!--&lt;!&ndash;{{scope.row.}}&ndash;&gt;-->
                <!--</template>-->
              <!--</el-table-column>-->
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <!---->
    <el-dialog
      class="money-dialog"
      title="结算信息"
      :visible.sync="dialogVisible"
      width="500px">
      <li><h5>结算周期</h5><span></span></li>
      <li><h5>结算方式</h5></li>
      <li><h5>最低结算金额</h5></li>
      <li><h5>商家财务联系人</h5></li>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false" size="small">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
      class="money-dialog"
      title="结算信息"
      :visible.sync="dialogVisible1"
      width="500px">
      <li>
        提现金额
        <el-input-number v-model="amount" controls-position="right":min="0" style="width: 200px;" size="small"></el-input-number>
      </li>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false" size="small">取 消</el-button>
    <el-button type="primary" @click="withdrawal" size="small">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import { money_page, merchant_info, money_list_page, money_status } from '@/api'
  import { page } from '@/mixins/page'
  import { IMGURL } from '@/utils/imgurl'

  export default {
    mixins: [page],
    data() {
      return {
        amount: 0,
        dialogVisible: false,
        dialogVisible1: false,
        IMGURL: IMGURL,
        activeName: 'first',
        tableData: [{}, {}],
        brand: {},
        balance: [],
        bill1: [],
        bill2: []
      }
    },
    methods: {
      getInfo() {
        money_list_page(this.page).then(res => {
          console.log(res, 2)
          // this.bill = res.content
          this.bill1 = res.content.filter(item => {
            return item.status === 1
          })
          this.bill2 = res.content.filter(item => {
            return item.status === 2
          })
        })
        this.page.sizi = 4
        money_page(this.page).then(res => {
          console.log(res, 1)
          this.balance = res.content
        })
      },
      withdrawal() {
        console.log(this.amount)
        if (this.amount > this.brand.balance) {
          this.$message({ type: 'warning', message: '余额不足' })
          return
        } else if (this.amount === 0) {
          this.$message({ type: 'warning', message: '提现金额不能为0' })
          return
        }
        const params = {
          amount: this.amount
        }
        money_status(params).then(res => {
          console.log(res)
          this.$message({ type: 'success', message: '提现申请成功' })
          this.dialogVisible1 = false
          this.getInfo()
        })
      }
    },
    mounted() {
      this.getInfo()
      merchant_info().then(res => {
        console.log(res, 55)
        this.brand = res.brand
      })
    }
  }
</script>

<style src="./index.scss" lang="scss" scoped></style>
